<script setup lang="ts">
import ChargingPile from "@/components/ChangeingPile/ChangeingPile.vue";
import ChargesTandard from "@/components/ChargesTandard/ChargesTandard.vue";
import RealisticPicture from "@/components/RealisticPicture/RealisticPicture.vue";
import { ref } from "vue";

let navIndex = ref<number>(0);
function checkIndex(index: number) {
  navIndex.value = index;
}
</script>
<template>
  <div class="charge-details">
    <div class="charge-details-list">
      <div class="charge-details-list-top">
        <text style="font-size: 32rpx; font-weight: 600"
          >美华智充水口充电站</text
        >
        <text style="font-size: 28rpx">59KM</text>
      </div>
      <div class="charge-details-list-center">
        <div class="charge-details-list-center-img">
          <img
            src="@/static/images/intelligent-image.png"
            alt=""
            class="center-img"
          />
        </div>
        <div class="charge-details-list-center-introduce">
          <p class="charge-p">地址：东莞市大良镇水口村银朗南路402号</p>
          <p class="charge-p">数量：14个</p>
          <p class="charge-p">资费：直流1.05-1.45元/度</p>
          <p class="charge-p">运营：正常营业</p>
          <div class="list-center-introduce">
            <div class="state" style="background-color: #4bbe9f">有空闲</div>
            <div class="state" style="background-color: #efab2e">24小时</div>
            <div class="state" style="background-color: #ee6c6c">对外开放</div>
            <div class="state" style="background-color: #6dc0f8">可充大巴</div>
          </div>
        </div>
      </div>
      <div class="charge-details-list-footer">
        <div class="charge-details-list-footer-count">
          <div style="font-size: 28rpx">充电桩：14个</div>
        </div>
        <div class="charge-details-list-footer-function">
          <uni-icons type="phone" size="30"></uni-icons>
          <uni-icons type="star" size="30"></uni-icons>
          <uni-icons type="location" size="30"></uni-icons>
        </div>
      </div>
    </div>
    <div class="charge-details-tab">
      <view class="charge-details-tab-head-nav">
        <view :class="navIndex == 0 ? 'active' : ''" @click="checkIndex(0)"
          >充电桩</view
        >
        <view :class="navIndex == 1 ? 'active' : ''" @click="checkIndex(1)"
          >收费标准</view
        >
        <view :class="navIndex == 2 ? 'active' : ''" @click="checkIndex(2)"
          >实景图</view
        >
      </view>
      <!-- 内容切换 -->
      <ChargingPile v-if="navIndex == 0"></ChargingPile>
      <ChargesTandard v-if="navIndex == 1"></ChargesTandard>
      <!-- <view class="content" v-if="navIndex == 2"> 我是选项5 </view> -->
      <RealisticPicture v-if="navIndex == 2"></RealisticPicture>
    </div>
  </div>
</template>

<style lang="less">
.charge-details {
  width: 100vw;
  height: 100vh;
  background-color: #e0e7f0;
  .charge-details-list {
    padding-left: 20rpx;
    padding-right: 20rpx;
    background-color: #fff;
    margin-bottom: 10rpx;
    .charge-details-list-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 90rpx;
      border-bottom: 1px solid #e0e7f0;
    }

    .charge-details-list-center {
      height: 240rpx;
      display: flex;
      padding-top: 20rpx;
      border-bottom: 1px solid #e0e7f0;
      .charge-details-list-center-img {
        width: 150rxp;
        height: 150rpx;
        margin-right: 40rpx;
        margin-top: 30rpx;
        .center-img {
          width: 150rpx;
          height: 150rpx;
        }
      }
      .charge-details-list-center-introduce {
        font-size: 24rpx;
        .charge-p {
          margin-bottom: 10rpx;
        }
        .list-center-introduce {
          width: 520rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .state {
            width: 120rpx;
            height: 60rpx;
            font-size: 24rpx;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 15rpx;
          }
        }
      }
    }

    .charge-details-list-footer {
      height: 90rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .charge-details-list-footer-function {
        width: 220rpx;
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .charge-details-tab {
    .charge-details-tab-head-nav {
      height: 100rpx;
      margin: 20rpx auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 100rpx;
      padding-right: 100rpx;
      background-color: #fff;
      font-size: 28rpx;
      font-weight: 700;
      view {
        padding-bottom: 10rpx;
      }
    }
  }
  .active {
    color: #1f1eff;
    border-bottom: 1px solid #1f1eff;
  }
}
</style>
